<template>
	<view>
		<view class="nav">
			<uni-icons type="arrowleft" @click="go2"></uni-icons>注册
		</view>
		<view class="message">
			<view class="detail">
				<!-- <text>用户昵称</text> -->
				<input type="text" placeholder="昵称" v-model="nickName">
			</view>
			<view class="detail">
				<!-- <text>邮箱地址</text> -->
				<input type="text" placeholder="邮箱地址" v-model="useremail">
			</view>
			<view class="detail">
				<!-- <text>密码</text> -->
				<input type="safe-password" password="true" placeholder="密码" v-model="userPass">
			</view>
			<view class="detail">
				<!-- <text>密码确认</text> -->
				<input type="safe-password" password="true" placeholder="密码确认" v-model="userPass2">
			</view>
			<view class="detail">
				<!-- <text>验证码</text> -->
				<input type="text" placeholder="验证码" v-model="code">
				<button class="btn" @click="tosure" v-if="showText==true">获取</button>
				<button class="btn btn2" v-else>{{second}}s</button>
			</view>
		</view>
		<view class="message3">
			<button class="button" @click="register">注册</button>
		</view>
	</view>
</template>

<script>
	import http from '../../utils/http'
	export default {
		data() {
			return {
				second: 60,
				showText: true,
				nickName: '',
				useremail: '',
				userPass: '',
				userPass2: '',
				code: '',
			}
		},
		methods: {
			tosure() {
				http({
					method: 'post',
					url: `/user/sendMessage`,
					data: {
						useremail: this.useremail
					},
					success: (res) => {
						console.log(res.data.data)
						if (res.data.code == 1) {
							uni.showToast({
								titile: res.data.data,
								icon: 'success'
							});
						} else {
							uni.showToast({
								titile: res.data.data,
								icon: 'error'
							})
						}
					},
					fail: (error) => {
						// console.log(error)
						uni.showToast({
							titile: '出错了',
							icon: 'error'
						})
					}
				})
				this.showText = false
				var interval = setInterval(() => {
					let times = --this.second
					this.second = times < 10 ? '0' + times : times //小于10秒补 0
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					this.second = 60
					this.showText = true
				}, 60000)

			},
			go2() {
				uni.navigateTo({
					url: '/pages/mine/login2'
				})
			},
			register() {
				if (this.userPass == this.userPass2 && this.code != '') {
					http({
						method: 'post',
						url: `/user/register`,
						data: {
							nickName: this.nickName,
							useremail: this.useremail,
							userPWD: this.userPass,
							code: this.code
						},
						success: (res) => {
							console.log(res.data.code)
							if (res.data.code == 1) {
								uni.showToast({
									titile: '注册成功，请登录',
									icon: 'success'
								});
								uni.navigateTo({
									url: '/pages/mine/login2'
								});
							} else {
								console.log('你失败了')
								uni.showToast({
									titile: '注册失败',
									icon: 'error'
								})
							}
						},
						fail: (error) => {
				
							uni.showToast({
								titile: '出错了',
								icon: 'error'
							})
						}
					})
				} else {
					console.log('密码或验证码错误')
					uni.showToast({
						titile: '密码或验证码错误，请验证',
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style>
	.nav {
		margin-top: 10%;
		font-family: YouYuan;
	}

	.message {
		margin-top: 20%;
	}

	.message2 {
		/* margin-top: 8%;
	margin-left: 5%; */
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
	}

	.message3 {
		margin-top: 22%;
	}

	.detail input {
		margin-left: 40rpx;
		font-size: 32rpx;
		width: 400rpx;
	}

	.tip {
		color: #41c20c;
		text-decoration: underline;
		margin-top: 20%;
		font-size: 30rpx;
	}

	.detail {
		display: flex;
		height: 100rpx;
		align-items: center;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		margin-left: 30rpx;
		padding-right: 30rpx;
	}

	.button {
		margin-top: 15rpx;
		text-align: center;
		line-height: 86rpx;
		width: 600rpx;
		height: 86rpx;
		border-radius: 30px;
		background-color: #41c20c;
		color: white;
		font-size: 14px;
	}

	.btn {
		background-color: #fff;
		font-size: 25rpx;
		padding-top: 10rpx;
		width: 120rpx;
		height: 80rpx;
	}
</style>
